<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chapter 3: Whoever He Is</title>

<link rel="shortcut icon" href="images/2reading.gif">
<link href="foti.css" rel="stylesheet" type="text/css">

<style type="text/css">

#canvas {
	margin: 10px auto 0 auto;
	border: 5px double #aa9e8c;
}

#bg, #char {display: none;}

</style>

<script type="text/javascript">
var vc, vctx, vi1, bgr;
	function init(){
		vc = document.getElementById("canvas");
		vctx = vc.getContext("2d");
		bgr = document.getElementById("bg");
		vctx.drawImage(bgr,0,0,800,600);
		vi1 = document.getElementById("char");
		setInterval("animation()",1000);		
	}
	
	var dax=0; counter=0;
	function animation(){
		if(counter >= 4) counter = 0; else counter++;
		vctx.drawImage(bgr,0,0,800,600);
		vctx.drawImage(vi1,dax,0,800,600,0,0,800,600);
		dax=800*counter;

	}
</script>

</head>
<body onload="init()">

	<h1>Figment of the Imagination</h1>
	<h2>Chapter 3: Whoever He Is</h2>
	<h2>Scene 1: Bizarre John</h2>


<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>

<div id="content">

<center><canvas id="canvas" width=800 height=600></canvas></center>
<img id="bg" src="images/ch3/corner.png" width=800 height=600>
<img id="char" src="images/ch3/laugh.png">

<center><img src="images/photo.png" width=800 style="margin:-4px 0 0 0;"></center>

<div id="scenetext">
<p>
"John! Oh my gosh! What are you doing here? How did you get here? Why were you standing behind me?" 
The rays slowly crept through the shattered windows. John did not reply. His face a few inches from 
Ada's. "John, talk to me!" she pleaded. His lips twitched, as if to utter something, but formed an 
eerie grin. "If we weren't in this horrible setting, your smile would be so charming. This would've 
been so romantic." she thought. John's mouth opened to liberate a laugh. This baffled her. His guffaw 
was getting blatant, his peculiar arm pointing at her face. 
</p>

<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>
	
</div>

<div align="center" style="padding-bottom: 30px;">
<a href="Chapter3.jsp" title="Back to Preview"><button id="button">BACK</button></a>
<a href="tableofcontent.jsp" title="Back to Table of Contents"><button id="button2">TABLE OF CONTENTS</button></a>
<a href="Chapter3Scene2.jsp" title="Pimple Problems"><button id="button">NEXT</button></a>
</div>

</div>


</body>
</html>

